<!-- 巡检任务详情-待执行/执行中 -->
<template>
  <div v-if="!isMain && isView" class="view-equip-detail">
    <div class="view-task-detail">
      <div class="view-task-title">
        <px-button type="primary" icon="ArrowLeft" @click="handleGoBack(false)">返回</px-button>
        <div class="text-box">
          <px-tooltip effect="dark" :content="taskDetailData.taskName">
            <px-text class="text" truncated>{{ taskDetailData.taskName }}</px-text>
          </px-tooltip>
          &nbsp;{{ taskDetailData.taskCode }}
        </div>
        <px-tag class="ml-2" :type="tagArr[taskDetailData['taskStatus']]">{{ taskDetailData["taskStatusDesc"] }}</px-tag>
        <!-- <div class="status">
          <div class="circle" :style="{ backgroundColor: `${tagBgColorList[taskDetailData.taskStatus]}` }" />
          <p :style="{ color: `${tagBgColorList[taskDetailData.taskStatus]}` }">
            {{ taskDetailData.taskStatusDesc }}
          </p>
        </div> -->
      </div>
      <div class="btn-group">
        <px-button
          v-if="taskDetailData.createBy === userId && [1, 2, 3].includes(taskDetailData.taskStatus)"
          v-has="'ALL_EQUIP_INSPECT_TASK_CANCEL'"
          type="primary"
          @click="handleCancel"
        >
          取消任务
        </px-button>
        <px-button
          v-if="[2].includes(taskDetailData.taskStatus) && taskDetailData.isInGroup"
          v-has="'ALL_EQUIP_INSPECT_TASK_COLLECT'"
          type="primary"
          @click="handleCollect"
        >
          领取任务
        </px-button>
        <px-button
          v-if="[4, 5].includes(taskDetailData.taskStatus) && (taskDetailData.executorId === userId || planDetailData.createBy === userId)"
          v-has="'ALL_EQUIP_INSPECT_TASK_FORWARD'"
          type="primary"
          plain
          @click="isForwardShow = true"
        >
          转派任务
        </px-button>
        <px-button
          v-if="taskDetailData.executorId === userId && [4, 5].includes(taskDetailData.taskStatus)"
          v-has="'ALL_EQUIP_INSPECT_TASKFORM_PAGE'"
          type="primary"
          @click="handleExecute"
        >
          执行任务
        </px-button>
      </div>
    </div>
    <CustomTabs
      :tabList="[4, 5, 6, 7].includes(taskDetailData.taskStatus) ? TAB_LIST : TAB_EXECUTE_LIST"
      :activeName="activeName"
      style="margin-bottom: 12px"
      @tabSelect="handelTabSelected"
    />
    <TaskDetail v-show="activeName === 'task'" :data="taskDetailData" />
    <DetailInspectPlan
      v-show="activeName === 'plan'"
      v-model:is-main="isUpdate"
      v-model:is-add="isUpdate"
      v-model:isUpdate="isUpdate"
      v-model:plan-no="planNo"
      v-model:isDetail="isDetail"
      isFromTask="true"
    />
    <!--巡检异常信息-->
    <ExceptionInfo v-show="activeName === 'exception'" :activeName="activeName" :taskDetailData="taskDetailData" />
    <!-- 转派任务 -->
    <ForwardDialog
      v-if="isForwardShow"
      :visible="isForwardShow"
      :rowData="taskDetailData"
      @closeDialog="isForwardShow = false"
      @queryTable="handleGoBack(true)"
    />
  </div>
</template>
<script setup lang="ts">
import { cancelTask, collectTask, queryTaskDetail } from "@/api/equip/inspectTask";
import CustomTabs from "@/components/Tabs/index.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { reactive, ref, toRefs, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { DetailInspectPlan } from "../../plan/components/index";
import { TAB_EXECUTE_LIST, TAB_LIST } from "../config";
import ExceptionInfo from "./ExceptionInfo.vue";
import ForwardDialog from "./ForwardDialog.vue";
import TaskDetail from "./TaskDetail.vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);

const props = defineProps(["isMain", "isView", "taskId"]);

const route = useRoute();
const router = useRouter();
const activeName = ref("task");
const tagArr = ["info", "info", "warning", "warning", "primary", "primary", "success", "success", "primary"];

const state = reactive<any>({
  userId: "",
  taskDetailData: {},
  planDetailData: {},
  isForwardShow: false,
  isUpdate: false,
  isDetail: false,
  planNo: ""
});
const { userId, taskDetailData, planDetailData, isForwardShow, isUpdate, planNo, isDetail } = toRefs(state);

const tagBgColorList = {
  0: "#909399", // 已取消
  1: "#909399", // 未开始
  2: "#F59E0B", // 待接单
  3: "#F59E0B", // 待接单超期
  4: "#3B82F6", // 执行中
  5: "#3B82F6", // 执行中超期
  6: "#10B981", // 已完成
  7: "#10B981" // 已完成超期
};

const getDetailData = async () => {
  try {
    const {
      query: { taskCode }
    } = route;
    planNo.value = "";
    taskDetailData.value = await queryTaskDetail(taskCode || props.taskId);
    planNo.value = taskDetailData.value.planCode;
  } catch (error) {
    console.log(error, "error");
  }
};

watchEffect(async () => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  userId.value = userInfo.userId;

  if (props.isView && !props.isMain) {
    getDetailData();
  }
});

// 点击tab显示页面详情
const handelTabSelected = selectName => {
  activeName.value = selectName;
  if (selectName === "plan") {
    planNo.value = taskDetailData.value.planCode;
    isDetail.value = true;
    isUpdate.value = false;
  } else {
    isDetail.value = false;
    isUpdate.value = true;
  }
};

// 返回上一级
const handleGoBack = isQuery => {
  activeName.value = "task";
  if (route.query.taskNo) {
    // 其他页面进入详情，返回其他页面
    router.go(-1);
  } else {
    if (isQuery) {
      emits("queryTable");
    }
    emits("backMainPage");
  }
};

// 执行
const handleExecute = () => {
  const { fullPath } = route;
  const newFullPath = encodeURIComponent(fullPath);
  router.push(`/all/equip/inspect/task/form?id=${taskDetailData.value.id}&page=${newFullPath}`);
};

// 取消任务
const handleCancel = () => {
  const { id, taskName } = taskDetailData.value;
  PxMessageBox.confirm(`确认取消巡检任务“${taskName}”吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await cancelTask(id);
      PxMessage.success("取消成功");
      handleGoBack(true);
    })
    .catch(() => {});
};

// 领取
const handleCollect = () => {
  const { id, taskName } = taskDetailData.value;
  PxMessageBox.confirm(`确认领取巡检任务“${taskName}”吗？领取后其他人将不可再接单`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    draggable: true,
    type: "warning"
  })
    .then(async () => {
      await collectTask(id);
      PxMessage.success("领取成功");
      handleExecute();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");

// .view-plan-detail {
//   height: calc(100vh - 260px) !important;
//   padding: 0;
// }
.view-equip-detail {
  height: auto;
  min-height: calc(100vh - 126px);
}

.view-task-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  overflow: hidden;

  .view-task-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;

    .text-box {
      display: flex;
      margin-left: 20px;
      overflow: hidden;
      font-size: 20px;
      font-weight: 600;
      color: rgb(0 0 0 / 90%);
    }

    .text {
      font-size: 20px;
      font-weight: 600;
      color: rgb(0 0 0 / 90%);
    }

    .status {
      display: flex;
      flex-direction: row;
      flex-shrink: 0;
      align-items: center;

      .circle {
        width: 8px;
        height: 8px;
        margin-right: 5px;
        margin-left: 8px;
        border-radius: 50%;
      }
    }
  }

  .btn-group {
    flex-shrink: 0;
    margin-left: 16px;
  }
}

:deep(.inspect-task-detail-content) {
  width: 100%;
  min-width: 500px;
}
</style>
